<template>
	<view class="page">
		<cu-custom bgColor="bg-F7F7F7" :isBack="true" textRight="true" type="">
			<block slot="backText" >
				<view class="titilestyle">
					{{title}}
				</view>
				
			</block>
		</cu-custom>
		<view class="content">

			<image class="userCard" :src="res+'/static/motorcycles/img/userCard.png'" mode="widthFix"></image>


			<view class="list grid col-4">
				
				<view class="item  middle flex-direction" v-for="(item,index) in taber" :key="index"  @click="jumpTo(index)">
					
					<image :src="res+item.icon" mode="aspectFit"></image>
					
					<view class="title">
						{{item.name}}
					</view>
				</view>

			</view>




		</view>

	</view>
</template>

<script>
	import {
		getList
	} from "@/static/motorcycles/api.js"
	export default {
		data() {
			return {
				title: "我的",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				taber: [

					{
						name: "活动中心",
						icon:"/static/motorcycles/img/active_1.png",
						path:"active"
					},
					{
						name: "消息中心",
						icon:"/static/motorcycles/img/notice.png",
						
					},
					{
						name: "客服中心",
						icon:"/static/motorcycles/img/kefu_1.png"
					},
					{
						name: "我的行程",
						icon:"/static/motorcycles/img/xingc.png",
						path:"tripRecord"
					},
					{
						name: "账户明细",
						icon:"/static/motorcycles/img/zhanghu.png"
					},
					{
						name: "车辆保修",
						icon:"/static/motorcycles/img/repair.png",
						path:"repair"
					},
					{
						name: "意见反馈",
						icon:"/static/motorcycles/img/yijian.png"
					},
					{
						name: "押金退还",
						icon:"/static/motorcycles/img/yajin.png"
					},
					{
						name: "个人设置",
						icon:"/static/motorcycles/img/set.png"
					}

				],
				list: []
			}
		},
		onLoad() {
			this.geData();
		},
		methods: {
			changeTab(i) {
				console.log("i " + i);
				this.tabIndex = i;
				this.list = [];
				this.geData();
			},
			jumpTo(i){
				if(!this.taber[i].path){
					uni.showToast({
						title:"暂未开放",
						icon:"none"
					})
					return false;
				}
				
				
				uni.navigateTo({
					url:this.taber[i].path
				})
			},
			geData() {
				console.log("tab" + this.tabIndex)
				getList(this.tabIndex).then(r => {
					this.list = r;
					console.log(r)
				})
			}
		}


	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		background-color: #F6F6F6;
	}

	.content {
		$itemW: calc(100vw*(670/750));
		width: 100%;
		
       
		.userCard {
			margin:0rpx 25rpx 0 25rpx;
			width: calc(100vw*(700/750));
			

		}
		.list{
			margin:0rpx 40rpx 0 40rpx;
			width: calc(100vw*(670/750));
			margin-top: 20rpx;	
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			padding-bottom: 50rpx;
			.item{
				padding-top: 50rpx;
				
				image{
					width: calc(100vw*(40/750));
					height: calc(100vw*(40/750));
				}
				.title{
                    margin-top: 23rpx;
				}
			}
		}

	
	
	}
</style>
